<template>
    <div>
        <el-button @click="buttonClick">点击</el-button>
        <div id="myChart" style="width:1200px;height:400px;"></div>
    </div>
</template>
<script>
    export default {
        name: 'echarts',
        data: function() {
            return {
                temList: [],
                windList: [],
                rainList: [],
                num: [],
            }
        },
        methods: {
            buttonClick() {
                this.tenClick();
                this.xAxisClick();
                this.hundredClick();
                this.temperature();
                this.echartClick();
                let _this = this;
                setInterval(this.t, 1000);
            },
            t() {
                if (this.temList.length >= 14)
                    this.temList.splice(0, 1)
                // this.num.splice(0, 1);
                // this.rainList.splice(0, 1);
                // if (this.num.length < 30) {
                //     for (let i = 0; i < 60; i++) {
                //         this.num.push(i)
                //     };
                // }
                this.rainList.push(this.getRandom(0, 100));
                this.rainList.push(parseInt(Math.random() * 100 + 1))
                this.temList.push(Number(((Math.random() * (50 + 1)) - 15).toFixed(1)))
                this.chartUpdate()
            },
            // x轴
            xAxisClick() {
                for (let i = 0; i <= 60; i++) {
                    this.num.push(i)
                }
            },
            // 封装
            getRandom(istart, iend) {
                let iChoice = iend - istart + 1;
                let res = Math.floor(Math.random() * iChoice + istart);
                return res;
            },
            // 0---10 风
            tenClick() {
                let iArray = [];
                for (let i = 0; i < 14; i++) {
                    iArray.push(this.getRandom(1, 10));
                }
                this.windList.push(iArray);
            },
            // 0--100   雨
            hundredClick() {
                let iArrayHundred = [];
                for (let i = 0; i < 60; i++) {
                    iArrayHundred.push(this.getRandom(0, 100));
                }
                this.rainList = (iArrayHundred);
            },
            // -15    35  温度
            temperature() {
                let iArrayTempList = [];
                for (let i = 0; i < 60; i++) {
                    iArrayTempList.push(((Math.random() * (50 + 1)) - 15).toFixed(1));
                }
                this.temList = (iArrayTempList.map(Number));
            },
            chartUpdate() {
                let option = this.myChart.getOption();
                option.series[0].data.splice(0, this.temList.length)
                option.series[0].data.splice(0, this.rainList.length)
                option.series[2].data.push(...this.rainList);
                // option.series[1].data.push(...this.windList)
                option.series[0].data.push(...this.temList);
                option.xAxis[0].data = [...this.num];
                // this.myChart.clear();
                this.myChart.setOption(option);
            },

            echartClick() {
                var colors = ['#5793f3', '#d14a61', '#675bba'];

                this.myChart = this.$echarts.init(document.getElementById('myChart'));
                console.log('this.myChart', this.myChart)
                let option = {
                    color: colors,
                    title: {
                        text: '天气折线图',

                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度', '风级', '降水量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: [{
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} ℃'
                            }
                        },
                        {
                            type: 'value',
                            name: '降水量',
                            position: 'right',
                            // offset: 80,
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        }
                    ],
                    series: [{
                            name: '温度',
                            type: 'line',
                            stack: '总量',
                            data: [],
                            symbolSize: 8, //拐点圆的大小
                            color: ['red'], //折线条的颜色
                            smooth: false, //关键点，为true是不支持虚线的，实线就用true

                            // itemStyle: {
                            //     normal: {
                            //         lineStyle: {
                            //             width: 2,
                            //             type: 'dotted' //'dotted'虚线 'solid'实线
                            //         }
                            //     }
                            // },

                            // itemStyle: {
                            //     normal: {
                            //         areaStyle: {
                            //             type: '',
                            //             //渐变色实现

                            //             type: "linear",
                            //             x: 0,
                            //             y: 0,
                            //             x2: 1,
                            //             y2: 0,
                            //             colorStops: [{
                            //                     offset: 0,
                            //                     color: "red" // 0% 处的颜色
                            //                 },
                            //                 {
                            //                     offset: 1,
                            //                     color: "yellow" // 100% 处的颜色
                            //                 }
                            //             ],
                            //             globalCoord: false // 缺省为 false
                            //         },
                            //         lineStyle: { //线的颜色
                            //             color: '#349e85'
                            //         },
                            //         //以及在折线图每个日期点顶端显示数字
                            //         label: {
                            //             show: true,
                            //             position: 'top',
                            //             textStyle: {
                            //                 color: 'white'
                            //             }
                            //         }
                            //     },
                            // },
                            lineStyle: {
                                color: "#349e85",
                                width: 1
                            }, //线条的样式
                            itemStyle: {
                                emphsis: {
                                    lineStyle: {
                                        // width: 2,
                                        type: 'solid' //'dotted'虚线 'solid'实线N
                                    }
                                },
                                color: "rgb(255, 70, 131)",
                                opacity: 0 //为0不会绘制图形拐点消失
                            } //拐点
                        },
                        {
                            name: '风级',
                            type: 'line',
                            stack: '总量',
                            // itemStyle: {
                            //     normal: {
                            //         color: '#00733e'
                            //     }
                            // },
                            itemStyle: {
                                color: "rgb(255, 70, 131)",
                            },
                            encode: {
                                x: [1, 2, ],
                                y: 0
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            animation: false,
                            data: [],
                        },
                        {
                            name: '降水量',
                            yAxisIndex: 1,
                            type: 'bar',
                            stack: '总量',
                            data: [],
                            barWidth: 10, //柱图宽度
                        },

                    ]
                };
                this.myChart.setOption(option);
            }

        },
         beforeDestroy() {
            //清除定时器
            clearInterval(this.t);
        },
    }
</script>

<style scoped>

</style>